<template>
	<div class="qrcode">
		<div class="qrcode-icon">
			<span class="tv"></span>
			<div class="qrcode-box" >
				<div class="tips" v-show="status"></div>
				<img class="qr" src="../../../public/image/bili.png" />
				<div class="status" v-show="!status">
					<span class="refresh" @click="getQrcode"><span><Icon type="refresh2"/></span>点击刷新</span>
				</div>
			</div>
			<footer class="qrcode-footer">
				<p class="status-txt">{{status?'扫描二维码登录':'二维码已失效'}}</p>
				<p class="app-link">请使用 <a href="https://app.bilibili.com/" target="_blank">哔哩哔哩客户端</a><br>扫码登录<br>或扫码下载APP</p>
			</footer>
		</div>
	</div>
</template>

<script>
export default{
	data(){
		return{
			timer: undefined,
			status: true
		}
	},
	methods:{
		getQrcode(){
			this.status = true;
			this.setTimer();
		},
		setTimer(){
			this.timer = setTimeout(()=>{
				this.status = false;
			},1000*60)
		}
	}
}
</script>

<style scoped lang="less">
.qrcode{
	float: left;
	padding-right: 9.5px;
	width: 480px;
	.qrcode-icon{
		position: relative;
		padding-top: 72px;
		.tv{
			position: absolute;
			width: 70px;
			height: 70px;
			left: 160px;
			top: 10px;
			background: url(https://i0.hdslb.com/bfs/static/e6f2388d454c82004905753802e9cfe709d80d08.png) no-repeat;
		}
		.qrcode-box{
			width: 140px;
			height: 140px;
			margin: 0 auto;
			background: #ddd;
			position: relative;
			.tips{
				position: absolute;
				width: 480px;
				height: 192px;
				top: -50px;
				left: 50%;
				margin-left: -240px;
				background: url(https://s1.hdslb.com/bfs/static/passport/static/img/qr-tip.3a21a48.png) no-repeat;
				background-size: cover;
				background-color: #fff;
				opacity: 0;
				-webkit-transition: opacity .5s;
				-o-transition: opacity .5s;
				-moz-transition: opacity .5s;
				transition: opacity .5s;
				z-index: 10;
				&:hover{
					opacity: 1;
				}
			}
			.qr{
				width: 140px;
				height: 140px;
			}
			.status{
				position: absolute;
				z-index: 20;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: hsla(0,0%,100%,.8);
				.refresh{
					margin: 40px auto;
					width: 60px;
					padding: 10px 5px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					white-space: nowrap;
					color: #0594c7;
					background-color: #fff;
					font-size: 16px;
					border-radius: 3px;
					-webkit-box-shadow: 0 3px 10px rgba(0,0,0,.5);
					box-shadow: 0 3px 10px rgba(0,0,0,.5);
					cursor: pointer;
					span{
						font-size: 24px;
					}
				}
			}
		}
		.qrcode-footer{
			width: 480px;
			height: 155px;
			background: url(https://s1.hdslb.com/bfs/static/passport/static/img/2233login.af9c53d.png) 0 -7px no-repeat;
			.status-txt{
				padding-top: 20px;
				text-align: center;
				color: #222;
				font-size: 18px;
				letter-spacing: 3px;
				margin-bottom: 5px;
			}
			.app-link{
				text-align: center;
				color: #717171;
				font-size: 14px;
				a{
					color: #00a1d6;
				}
			}
		}
	}
}
</style>
